<template>
  <view class="approval-container">
    <!-- 顶部标签栏（审批记录页面不显示） -->
    <view class="first-header">
      <!-- 顶部标签栏 -->
      <view class="tab-bar" v-if="currentTab !== 'record'">
        <text
            class="tab-item"
            :class="{ active: currentTab === 'approval' }"
            @click="switchTab('approval')"
        >请假审批</text>
        <text
            class="tab-item"
            :class="{ active: currentTab === 'return' }"
            @click="switchTab('return')"
        >返校审批</text>
        <text
            class="tab-item"
            :class="{ active: currentTab === 'overtime' }"
            @click="switchTab('overtime')"
        >超时未归</text>
        <text
            class="tab-item"
            :class="{ active: currentTab === 'rank' }"
            @click="switchTab('rank')"
        >次数排名</text>
      </view>

      <!-- 搜索栏 -->
      <view class="search-bar">
        <image src="/static/image/search.png" class="search-icon" />
        <input
            type="text"
            placeholder="请输入姓名/学号模糊查询"
            class="search-input"
        />
      </view>
    </view>

    <!-- 待审批提示（审批记录页面不显示） -->
    <view class="tip-bar" v-if="currentTab !== 'rank' && currentTab !== 'record'">
      <image src="/static/warn.png" class="tip-icon" />
      <text class="tip-text">
        {{ currentTab === 'approval' ? '请假待审批 1 人' :
          currentTab === 'return' ? '返校待审批 1 人' :
              '超时未归 1 人' }}
      </text>
    </view>

    <!-- 二级菜单（请假审批、排名、审批记录不显示） -->
    <view class="second-menu" v-if="currentTab !== 'approval' && currentTab !== 'rank' && currentTab !== 'record'">
      <button
          v-for="(item, index) in secondMenu"
          :key="index"
          class="choose-btn"
          :class="{ active: selectedSecondMenu === index }"
          @click="selectedSecondMenu = index"
      >
        {{ item }}
      </button>
    </view>

    <!-- 审批卡片（审批记录页面不显示） -->
    <view class="approval-card" v-if="currentTab !== 'rank' && currentTab !== 'record'">
      <view class="card-header">
        <view class="avatar">张</view>
        <text class="name">张小白</text>
        <text class="student-id">2020090911004</text>
      </view>
      <view class="card-info">
        <text class="info-item">请假类型：回家</text>
        <text class="info-item">申请时间：2022-11-26 17:56:32</text>
        <text class="info-item">开始时间：2022-11-26 17:56:32</text>
        <text
            class="info-item"
            :class="{ red: currentTab === 'overtime' }"
        >
          结束时间：2022-11-26 17:56:32
        </text>
        <text class="info-item">
          请假理由：回家取东西回家取东西回家取东西回家取东西回家取东西回家取东西回家取东西回家取东西
        </text>
      </view>
      <view class="card-footer">
        <text class="status">
          {{ currentTab === 'approval'
            ? '请假待审批'
            : currentTab === 'return'
                ? '返校待审批'
                : '学生待审请返校' }}
        </text>
        <button
            class="approve-btn"
            v-if="currentTab !== 'overtime'"
        >
          {{ currentTab === 'approval' ? '同意请假' : '同意返校' }}
        </button>
      </view>
    </view>

    <!-- 排名模块（审批记录页面不显示） -->
    <view class="ranking-container" v-if="currentTab === 'rank'">
      <!-- 排名表头 -->
      <view class="rank-header">
        <text class="rank-field">排名</text>
        <text class="rank-field">姓名</text>
        <text class="rank-field">月排名</text>
        <text class="rank-field">年度排名</text>
      </view>

      <!-- 排名列表 -->
      <view class="ranking-list">
        <view
            class="ranking-item"
            v-for="(item, index) in rankingData"
            :key="index"
        >
          <view class="item-left">
            <text class="rank-num">{{ index + 1 }}</text>
            <image
                v-if="index === 0"
                :src="'/static/image/medal01.png'"
                class="medal"
            />
            <image
                v-else-if="index === 1"
                :src="'/static/image/medal02.png'"
                class="medal"
            />
            <image
                v-else-if="index === 2"
                :src="'/static/image/medal03.png'"
                class="medal"
            />
            <view class="name-wrap">
              <text class="name-initial">{{ item.initial }}</text>
              <text class="name-text">{{ item.name }}</text>
            </view>
          </view>
          <text class="month-rank">{{ item.monthRank }}</text>
          <text class="year-rank">{{ item.yearRank }}</text>
        </view>
      </view>
    </view>

    <!-- 审批记录页面内容 -->
    <view v-if="currentTab === 'record'">
      <!-- 审批记录的二级菜单 -->
      <view class="second-menu">
        <button
            v-for="(item, index) in recordSecondMenu"
            :key="index"
            class="choose-btn"
            :class="{ active: selectedRecordSecondMenu === index }"
            @click="selectedRecordSecondMenu = index"
        >
          {{ item }}
        </button>
      </view>

      <!-- 审批记录的卡片 -->
      <view class="approval-card" v-for="(card, cardIndex) in recordCards" :key="cardIndex">
        <view class="card-header">
          <view class="avatar">张</view>
          <text class="name">张小白</text>
          <text class="student-id">2020090911004</text>
        </view>
        <view class="card-info">
          <text class="info-item">请假类型：回家</text>
          <text class="info-item">申请时间：2022-11-26 17:56:32</text>
          <text class="info-item">开始时间：2022-11-26 17:56:32</text>
          <text class="info-item">结束时间：2022-11-26 17:56:32</text>
          <text class="info-item">
            请假理由：回家取东西回家取东西回家取东西回家取东西回家取东西回家取东西回家取东西回家取东西
          </text>
        </view>
        <!--        <view class="card-footer">
                  <text class="status">已审批</text>
                </view> -->
      </view>
    </view>

<!--底部导行-->
    <view class="bottom-nav">
      <view class="nav-item" @click="switchTab('approval')">
        <image
            :src="currentTab === 'approval' ? '/static/image/application@.png' : '/static/image/application.png'"
            class="nav-icon"
        />
        <text class="nav-text">请假审批</text>
      </view>
      <view class="nav-item" @click="switchTab('record')">
        <image
            :src="currentTab === 'record' ? '/static/image/record@.png' : '/static/image/record.png'"
            class="nav-icon"
        />
        <text class="nav-text">审批记录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: "approval", // 当前选中的标签页
      secondMenu: ["全部", "已申请返校", "未申请返校"], // 请假等页面的二级菜单
      selectedSecondMenu: 0, // 请假等页面当前选中的二级菜单
      rankingData: [
        { initial: "张", name: "唐秀兰", monthRank: 10, yearRank: 60 },
        { initial: "贺", name: "贺涛", monthRank: 9, yearRank: 60 },
        { initial: "乔", name: "乔刚", monthRank: 8, yearRank: 60 },
        { initial: "江", name: "江磊", monthRank: 7, yearRank: 60 },
        { initial: "吴", name: "吴秀英", monthRank: 6, yearRank: 60 },
        { initial: "谭", name: "谭娟", monthRank: 5, yearRank: 60 },
        { initial: "蔡", name: "蔡秀兰", monthRank: 4, yearRank: 60 },
        { initial: "任", name: "任娟", monthRank: 3, yearRank: 60 },
        { initial: "王", name: "王军", monthRank: 2, yearRank: 60 },
        { initial: "袁", name: "袁静", monthRank: 1, yearRank: 60 },
      ],
      recordSecondMenu: ["全部", "我审批的", "抄送我的"], // 审批记录的二级菜单
      selectedRecordSecondMenu: 0, // 审批记录当前选中的二级菜单
      recordCards: [{}, {}], // 审批记录的卡片数据，这里简单模拟两个卡片
    };
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab;
      if (tab !== 'record') {
        this.selectedSecondMenu = 0; // 切换到非审批记录tab时重置请假等页面的二级菜单
      } else {
        this.selectedRecordSecondMenu = 0; // 切换到审批记录tab时重置审批记录的二级菜单
      }
    },
  },
};
</script>

<style scoped>
.approval-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 0;
  box-sizing: border-box;
}

.first-header {
  padding-bottom: 5px;
  background-color: #2b68e6;
  border-radius: 0 0 20px 20px;
}

/* 顶部标签栏 */
.tab-bar {
  display: flex;
  background-color: #2b68e6;
  padding: 10px 0;
}

.tab-item {
  position: relative;
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 16px;
  padding: 5px 0;
}

.tab-item.active {
  /* border-bottom: 2px solid #fff; */
  font-weight: 700;
}

/* 使用伪元素实现短下划线 */
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; /* 从中间开始 */
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background-color: #fff;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  margin: 10px;
  padding: 5px 15px;
}

.search-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.search-input {
  flex: 1;
  height: 30px;
  font-size: 14px;
}

/* 待审批提示 */
.tip-bar {
  display: flex;
  align-items: center;
  background-color: #fff8e1;
  border-radius: 0 0 5px 5px;
  margin: 0 10px 5px 10px;
  padding: 5px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.tip-icon {
  margin-left: 10px;
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.tip-text {
  font-size: 14px;
  color: #f57c00;
}

/* 二级菜单 */
.second-menu {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  gap: 10px;
}

.choose-btn {
  flex: 1;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
}

.choose-btn.active {
  border: 1px solid #2b68e6;
  color: #2b68e6;
}

.choose-btn::after {
  border: none !important;
}

/* 审批卡片 */
.approval-card {
  background-color: #fff;
  border-radius: 10px;
  margin: 0 10px 10px 10px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.avatar {
  width: 40px;
  height: 40px;
  background-color: #2b68e6;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 10px;
}

.name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.student-id {
  font-size: 14px;
  color: #999;
  margin-left: 100px;
}

.card-info {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dotted #333;
}

.info-item {
  display: block;
  font-size: 12px;
  color: #7b7b7b;
  margin-bottom: 5px;
}

.info-item.red {
  color: red;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status {
  font-size: 14px;
  color: #ff7043;
}

.approve-btn {
  margin-left: 150px;
  background-color: #2b68e6;
  color: #fff;
  border-radius: 20px;
  padding: 5px 20px;
  font-size: 14px;
}

/* 排名模块 */
.ranking-container {
  padding: 10px;
}

.rank-header {
  /* background-color: #f0f0f0; */
  /* border-radius: 6px;*/
  display: flex;
  justify-content: space-around;


}

.rank-field{
  font-size: 13px;
  color: #7b7b7b;
}

.ranking-list {
  margin-top: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 200px;
}

.ranking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.ranking-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
  flex: 2;
}

.rank-num {
  width: 24px;
  text-align: center;
  font-weight: bold;
  color: #333;
}

.medal {
  width: 20px;
  height: 20px;
  margin-left: 5px;
}

.name-wrap {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.name-initial {
  width: 28px;
  height: 28px;
  background: #2b68e6;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  font-size: 14px;
}

.name-text {
  font-size: 14px;
  color: #333;
}

.month-rank,
.year-rank {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #666;
}

/* 底部导航栏 */
.bottom-nav {
  display: flex;
  background-color: #fff;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.nav-text {
  font-size: 12px;
  color: #666;
}
</style>